<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>
<style>
    .layui-input-inline {
        width: 400px !important;
    }
</style>

<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row">
                <form class="layui-form">
                    <div class="layui-form-item">
                                     <span style="float: left;width: 85%">
                                            <input type="text" name="keyword" value="" class="layui-input" autocomplete="off"
                                                   placeholder="姓名/手机号">
                                        </span>
                        <span style="float: left;width: 15%">
                                            <button class="layui-btn" lay-submit lay-filter="select" style="width: 100%"><i class="layui-icon">&#xe615;</i>搜索</button>
                                    </span>
                    </div>
                </form>
                <table class="layui-table" lay-skin="line">
                    <thead>
                    <tr>
                        <th>头像</th>
                        <th>姓名</th>
                        <th>电话</th>
                        <th></th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item,index) in items" :data_id="item.id">
                        <td >
                            <img v-if="item.avatar=='0'" class="layui-circle" src="/res/img/thumb.png" style="max-width: 50px;"  @click="selectedPm(item)">
                            <img  v-else class="layui-circle" :src="item.avatar" style="max-width: 50px;"  @click="selectedPm(item)">
                        </td>

                        <td>{{item.truename}}</td>
                        <td>{{item.phone}}</td>
                        <td>
                            <i v-if="item.check==1" class="layui-icon" style="font-size: 20px; color:red;">&#xe605;</i>
                            <i v-else></i>
                        </td>

                        <td>
                            <button class="layui-btn layui-btn-sm layui-btn-primary"
                                    @click="selectedQc(item)">
                                选择
                            </button>

                        </td>
                    </tr>

                    </tbody>
                </table>
                <div id="demo7"></div>
            </div>


        </div>

    </div>


</div>
</div>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            items:[],
            list:[],
            curr: 1,//当前页
            limit: 6,//当前页数据个数

        },
        methods: {
            //获取所有数据
            selectedQc: function (n) {
                this.list=n;
                n['check']=1;
                sure();
            },
        },
    });

    $(function () {
        var q="";
        if('{$q}'){
            q='{$q}';
            var qc= eval('('+q+')');
            app.list=qc;
            app.list['check']=1;
            save();
        }

    });

    function init() {
        layer.load(2);
        $.get("{:url('edit_select_qc')}" , {page: app.curr, limit: app.limit},
            function (res) {
                layer.closeAll();
                app.items = res.data;
                var localQc = layui.data('eqc');
                var qc_id=localQc.eqcList.id;
                app.items.forEach(function (item, index) {

                    if(item.id==qc_id){
                        Vue.set(item, 'check',1);
                    }
                    else{
                        Vue.set(item, 'check',0);
                    }

                });
            }
        );
    }

    layui.use(['table','laypage','form'], function () {
        var $ = layui.$
            , layer = layui.layer
            , form = layui.form;
        var laypage = layui.laypage
        var table = layui.table;

        laypage.render({
            elem: 'demo7'
            ,count: "{$count}" //数据总数
            ,curr:1
            ,limit:6
            , limits: [6,12]
            , layout: ['count', 'prev', 'page', 'next']
            , jump: function (obj) {
                console.log(obj)
                app.curr = obj.curr;
                app.limit = obj.limit;
                init();

            }
        });

        form.on('submit(select)', function (data) {
            if (!data.field.keyword) {
                return false;
            }

            layer.load(2);
            $.get("{:url('select')}" ,{keyword: data.field.keyword,flag:4},
                function (res) {
                    layui.use(['laypage'], function () {
                        var laypage = layui.laypage;
                        //完整功能
                        laypage.render({
                            elem: 'demo7'
                            ,curr:1
                            ,limit:6
                            , count: res.total
                            , limits: [6, 12]
                            , layout: ['count', 'prev', 'page', 'next']
                            , jump: function (obj) {
                                console.log(obj)
                                app.curr = obj.curr;
                                app.limit = obj.limit;
                                layer.load(2);

                                $.get("{:url('select')}", { page: app.curr,limit: app.limit,keyword: data.field.keyword,flag:4},
                                    function (res) {
                                        layer.closeAll();
                                        app.items = res.data;
                                        var localQc = layui.data('eqc');
                                        var qc_id=localQc.eqcList.id;
                                        app.items.forEach(function (item, index) {

                                            if(item.id==qc_id){
                                                Vue.set(item, 'check',1);
                                            }
                                            else{
                                                Vue.set(item, 'check',0);
                                            }

                                        });
                                    }
                                );
                            }
                        });

                    });


                }
            );


            return false;
        });

    });
    function save() {
        layui.data('eqc', {
            key: 'eqcList',
            value: app.list
        });
    }
    function sure() {
        save();
        var localQc = layui.data('eqc');
        if (localQc.eqcList) {
            parent.app.quality = localQc.eqcList.truename;
            parent.app.qualityb = "已选择";
            parent.layer.closeAll();
            parent.layer.msg('选择成功！');
        }
    }
</script>
</body>
</html>